<template>
    <div class="sum">
        <ul class="mui-table-view" ref="sumul">
				<li class="mui-table-view-cell mui-media" v-for='item in locallist' :key='item.id'>
					<router-link :to="'/home/newsinfo/'+item.id">
						<img class="mui-media-object mui-pull-left" src="../../images/menu1.png">
						<div class="mui-media-body">
							{{item.id}}
							<p class='mui-ellipsis'>{{item.detail}}</p>
						</div>
					</router-link>
				</li>
        </ul>
        <div class="mrow" style="margin: 10px 0;" ref="mrow">
			<textarea  rows="5"  @keyup.enter="input" v-model="place" @focus="foc" ref="text" @keyup="ku" @blur="bl"></textarea>
		</div>
    </div>
</template>

<script>
import {Toast} from 'mint-ui'
export default {
    data(){
        return {
            place:"评论内容",
            locallist:[],
            origin:"评论内容",

        }
    },
    created(){
        this.locallist=JSON.parse(localStorage.getItem('comment') || '[]')
    },
    mounted(){
        this.$refs.sumul.style.maxHeight=this.$refs.mrow.offsetTop-this.$refs.sumul.offsetTop+'px'
    },
    beforeUpdate(){
        this.$refs.sumul.style.maxHeight=this.$refs.mrow.offsetTop-this.$refs.sumul.offsetTop+'px'
    },
    methods:{
        input(){
            var user = {}
            if(this.place=='评论内容' || this.place == '') {
                this.alert(1)
            } else {
                user.time = new Date()
                user.id = (user.time).valueOf()
                user.detail = this.place
                this.locallist.push(user)
                localStorage.setItem('comment',JSON.stringify(this.locallist))
            }
            this.place =this.origin
            this.foc()
        },
        alert(a){
            if( a == 1 ){
            Toast('请输入文字');
            }
        },
        foc(){
            if (this.place == '评论内容'){
                this.$refs.text.style.color='grey'
                this.place = ''
            }
        },
        ku(){
            this.$refs.text.style.color='black'
        },
        bl(){
            this.$refs.text.style.color='black'
            if(this.place == ''){
                this.place =this.origin
            }
        }
    }
}
</script>

<style scoped>
.sum{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
img{
    margin:0;
}
.mui-table-view{
    display: inline-block;
    /* height: 440px; */
    max-height: 440px;
    overflow-y: auto;
    width: 100%;
    flex: 1;
}
.mrow{
    width: 100%;  
    position: absolute!important;
    bottom: 20px;
}
</style>